<template>
  <md-nav-bar title="会员" backgroundColor="#0C705A" color="#ffffff" />
  <view class="vip-center-container">
    <view class="vip-header">
      <image class="avatar" :src="data.userinfo?.avatar" mode="aspectFill" />
      <view class="user-info">
        <view class="user-name">{{ data.userinfo?.nickname }}</view>
      </view>
    </view>

    <!-- 当前等级卡片 -->
    <view class="level-card" :class="'level-' + data.userinfo?.level?.level">
      <view class="level-info">
        <view class="level-label">当前等级</view>
        <view class="level-title">{{ data.detail?.level }}</view>
        <view class="level-desc">当前累计充值 {{ formatUnitCentToYuan(data.detail?.rechargePrice, 2) }}元</view>
      </view>
    </view>

    <!-- isong会员权益 -->
    <view class="section-bar">
      <view class="section-title">isong会员权益</view>
      <md-agreement text="会员规则" hideSymbol color="white" />
    </view>

    <!-- 会员权益卡片 -->
    <view v-for="(item, idx) in data.detail?.rechargePackage" :key="idx" class="benefit-card">
      <view class="benefit-header">
        <view class="benefit-title">{{ item.packageName }}</view>
        <view class="benefit-upgrade">升级条件：累计充值达{{ formatUnitCentToYuan(item.condition) }}元</view>
      </view>
      <view class="benefit-content">
        <view class="benefit-block">
          <view class="block-title">专属折扣</view>
          <view class="block-discount">{{ item?.discount }}折</view>
          <view class="block-desc">每次测评仅消耗{{ item?.usePoint }}A豆</view>
        </view>
        <view class="benefit-block">
          <view class="block-title">专属礼品</view>
          <view class="gift-block">
            <image class="gift-img" :src="item?.presentPicture" mode="aspectFill" />
            <view class="block-gift-desc">
              {{ item?.presentName }}
              <br />
              <text class="gift-price">价值 {{ formatUnitCentToYuan(item?.presentPrice) }}元</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="vip-tip">会员专属礼品请在达到等级后联系客服领取</view>
    <button class="charge-btn" @click="onCharge">前往充值</button>
  </view>
</template>

<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app';
import { reactive, ref } from 'vue';
// 接口
import api from '@/api';
import type { User } from '@/api/data';
import { formatUnitCentToYuan } from '@/utils/util';

const data = reactive({
  userinfo: {} as User.Get.Data,
  detail: {} as User.LevelDetail.Data,
});

// 充值
function onCharge() {
  uni.navigateTo({
    url: `/pages/sub/my/rechargePage`,
  });
}

/**
 * 接口相关
 */
// 获取用户信息及会员等级
const fetchGetUserinfo = async () => {
  try {
    const res = await api.User.get();
    data.userinfo = res.data;
  } catch (e) {}
};

// 获取会员等级详情
const fetchGetLevelDetail = async (memberId: number) => {
  try {
    const res = await api.User.levelDetail({
      memberId,
    });
    data.detail = res.data;
  } catch (error) {}
};

onLoad(() => {
  const _memberId = uni.getStorageSync('auth')?.userId;
  _memberId && fetchGetLevelDetail(_memberId);
  fetchGetUserinfo();
});
</script>

<style lang="scss" scoped>
.vip-center-container {
  min-height: 100vh;
  background: #086953;
  padding-bottom: 48rpx;
}
.vip-header {
  padding: 37rpx 32rpx 0 32rpx;
  display: flex;
  align-items: center;
}
.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background: #eee;
  margin-right: 24rpx;
  flex-shrink: 0;
  border: 4rpx solid #fff;
}
.user-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.user-name {
  font-size: 28rpx;
  color: #fff;
  font-weight: 500;
}
.level-card {
  display: inline-block;
  margin: 0 40rpx 0 50rpx;
  position: relative;
  width: calc(100% - 90rpx);
  height: 262rpx;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  &.level-0 {
    background-image: url('https://cdn.xmxiaomai.com/isong_static/my/Group%207.png'); // 普通会员
  }
  &.level-1 {
    background-image: url('https://cdn.xmxiaomai.com/isong_static/my/v2.png'); // 白金会员
  }
  &.level-2 {
    background-image: url('https://cdn.xmxiaomai.com/isong_static/my/v3.png'); // 钻石会员
  }
  &.level-3 {
    background-image: url('https://cdn.xmxiaomai.com/isong_static/my/v1.png'); // 超级会员
  }
}
.level-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  // height: 121rpx;
  padding: 54rpx 0 48rpx 50rpx;
}
.level-label {
  font-size: 26rpx;
  color: #2b2a2a;
  margin-bottom: 9rpx;
}
.level-title {
  font-size: 40rpx;
  color: #2b2a2a;
  font-weight: 500;
  margin-bottom: 16rpx;
}
.level-desc {
  font-size: 28rpx;
  color: #2b2a2a;
}
.section-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 45rpx 0 50rpx;
  height: 160rpx;
  background-image: url('https://cdn.xmxiaomai.com/isong_static/my/vbg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 160rpx;
  margin-top: -47rpx;
  position: relative;
}
.section-title {
  font-size: 30rpx;
  color: #fff;
  font-weight: 600;
}
.section-link {
  font-size: 28rpx;
  color: #fff;
  opacity: 0.8;
  // text-decoration: underline;
}
.benefit-card {
  background: #cbf1ee;
  border-radius: 32rpx;
  margin: 24rpx 45rpx 0;
  padding: 32rpx 24rpx 24rpx 24rpx;
}
.benefit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18rpx;
}
.benefit-title {
  font-size: 32rpx;
  color: #0b6c5a;
  font-weight: 700;
}
.benefit-upgrade {
  font-size: 26rpx;
  color: #545353;
  opacity: 0.7;
  font-weight: 400;
}
.benefit-content {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}
.benefit-block {
  flex: 1;
  background: #eafffd;
  border-radius: 24rpx;
  margin-right: 18rpx;
  padding: 24rpx 0 24rpx 26rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  box-sizing: border-box;
}
.benefit-block:last-child {
  margin-right: 0;
}
.block-title {
  font-size: 26rpx;
  color: #2b2a2a;
  font-weight: 600;
  margin-bottom: 8rpx;
  width: 100%;
}

.block-discount {
  font-size: 36rpx;
  color: #0b6c5a;
  font-weight: 700;
  margin-bottom: 8rpx;
}
.block-desc {
  font-size: 24rpx;
  color: #545353;
  width: 100%;
}
.gift-block {
  display: flex;
}
.gift-img {
  width: 92rpx;
  height: 92rpx;
  border-radius: 4rpx;
}
.block-gift-desc {
  margin-left: 18rpx;
  font-size: 24rpx;
  color: #2b2a2a;
  text-align: left;
  line-height: 1.4;
  .gift-price {
    font-weight: 500;
    font-size: 24rpx;
    color: #004e3c;
  }
}
.vip-tip {
  text-align: center;
  color: #fff;
  font-size: 24rpx;
  margin: 32rpx 0 49rpx 0;
  opacity: 0.8;
}
.charge-btn {
  background: linear-gradient(270deg, #ddb38b 0%, #feefbf 100%);
  border-radius: 49rpx;
  color: #086953;
  margin: 0 auto;
  font-size: 36rpx;
  border-radius: 60rpx;
  font-weight: 500;
  border: none;
  // margin: 0 45rpx 32rpx;
  position: fixed;
  bottom: 32rpx;
  left: 45rpx;
  width: calc(100% - 90rpx);
}
</style>
